<template>
  <div class="home-container">
    <ul>
      <li>
        <div class="core-item" @click="openWin('/patientDetails',0)">
          <img src="~@/assets/dashboard/health_records.png" alt="">
          <h6>健康档案</h6>
        </div>
      </li>
      <li>
        <div class="core-item" @click="openWin('https://creditcardapp.bankcomm.com/applynew/front/apply/track/record.html?trackCode=A121211549471',1)">
          <img src="~@/assets/dashboard/get_medical_attention.png" alt="">
          <h6>信用就医</h6>
        </div>
      </li>
      <li>
        <div class="core-item">
          <img src="~@/assets/dashboard/internet_hospital.png" alt="">
          <h6>互联网医院</h6>
        </div>
      </li>
      <li>
        <div class="core-item">
          <img src="~@/assets/dashboard/buy_medicine.png" alt="">
          <h6>在线买药</h6>
        </div>
      </li>
      <li>
        <div class="core-item" @click="openWin('https://internet-hospital.ijia120.com/#/?id=45076',1)">
          <img src="~@/assets/dashboard/online_consultation.png" alt="">
          <h6>在线问诊</h6>
        </div>
      </li>
      <li>
        <div class="core-item" @click="openWin('https://www.guizhou12320.org.cn/',1)">
          <img src="~@/assets/dashboard/make_an_appointment.png" alt="">
          <h6>预约挂号</h6>
        </div>
      </li>
      <li style="height: 0;" />
      <li style="height: 0;" />
    </ul>
  </div>
</template>

<script>

export default {
  name: 'Home',
  data() {
    return {
    }
  },
  methods: {
    openWin(path, type) {
      if (type === 0) {
        this.$router.push(path)
      } else if (type === 1) {
        window.open(path)
      }
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.home-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center ;
  min-height: calc(100vh - 50px);
  background: #DCF6F9;
  ul{
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    width:900px;
  }
  li {
    padding:0 35px;
    width: 290px;
    height: 270px;
    margin-bottom:40px;
    .core-item{
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      align-items: center;
      width: 230px;
      height: 100%;
      background: #fff;
      box-shadow: 0px 3px 10px 1px rgba(0,0,0,0.16);
      border-radius: 12px;
      cursor: pointer;
    }
    img{
      width: 100px;
      height: 100px;
      margin-bottom: 30px;
    }
    h6{
      margin-bottom: 54px;
      font-size: 22px;
      font-weight: bold;
      color: #2C3236;
    }
  }
}
</style>
